<template>
	<view class="box">
		<view class="top">
			<u-navbar :is-back="true" title="预约订单" :border-bottom="false"></u-navbar>
		</view>
		<view>
			<u-tabs-swiper ref="tabs1" :list="list" :current="current" @change="tabsChange" :is-scroll="false"
				active-color="#eb4e38" swiperWidth="750"></u-tabs-swiper>
		</view>
		<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" class="swiperBox">
			<swiper-item class="swiper-item" v-for="(item, index) in tabs" :key="index">
				<scroll-view scroll-y @scrolltolower="onreachBottom" lower-threshold="10"
					:style="{height: boxHeight + 'px'}">
					<view class="orderTotal" v-if="item.list.length>0">
						<view class="orderItem container_br" v-for="order in item.list"
							:key="order.id" @click="goDetail(order.id)">
							<view class="status jsbc">
								<view class="left">
									<span v-if="order.check_status==0">预约中</span>
									<span v-if="order.check_status==1">预约成功</span>
									<span v-if="order.check_status==-1">预约失败</span>
								</view>
								<view class="right">
									<view v-if="current==0">支付时间为下午六点开始</view>
									<view v-if="current==1">
										<span v-if="!open">支付时间为下午六点开始</span>
										<view class="time" v-if="open">
											<u-count-down :timestamp="returnTime(order)" format="DD天HH时mm分ss秒" ></u-count-down>
										</view>
									</view>
									<view v-if="current==2">
										<span v-if="order.is_buy==0">未支付</span>
										<span v-if="order.is_buy==1">支付成功</span>
									</view>
								</view>
							</view>
							<view class="goods flc">
								<view class="left">
									<image :src="order.goods.images_format[0]" mode="widthFix" style="width: 160rpx;"></image>
								</view>
								<view class="right ml2">
									<view class="name">
										{{order.goods.name}}  {{order.skus_name?order.skus_name[0]:""}}
									</view>
									<view class="price">
										￥{{order.goods.reservation_price}}
									</view>
									<view class="num">
										预约数量 {{order.goods_number}}
									</view>
								</view>
							</view>
							<view class="btns" v-if="current==0||current==2">
								<view class="btn detail" @click.stop="goDetail(order.id)">
									查看详情
								</view>
							</view>
							<view class="btns" v-else>
								<view class="btn detail" @click="goDetail(order.id)">
									查看详情
								</view>
								<view class="btn pay" v-if="open" @click.stop="gopay(order)">
									去支付
								</view>
								<view class="btn pay" v-if="!open">
									未到支付时间
								</view>
								
							</view>
						</view>
						<u-loadmore :status="status" @loadmore="loadmore" />
						<view class="H100">

						</view>
					</view>
					<view class="noData" style="width: 410rpx;height: 240rpx; margin: 60rpx auto;" v-else>
						<image src="../../static/img/empty.png" mode="widthFix" style="width: 410rpx;"></image>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import { useCartStore } from '../../stores/cart'
	
import {
		getPlist
	} from '@/api/index.js'
	import baseUrl from '@/config/config.js'
	import {
		toast,
		tiao,
		toastC,
		toastload,
		closeload
	} from '@/utils/common.js'
	export default {
		data() {
			return {
				boxHeight: wx.getSystemInfoSync().windowHeight - 48 - 37,
				page: 1,
				list: [{
					name: '预约中',
				}, {
					name: '待支付',
				}, {
					name: '预约结果',

				}],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				tabs: [{
					id: '1',
					list: []
				}, {
					id: '2',
					list: []
				}, {
					id: '3',
					list: []
				}], // 要展示的业务数据列表
				status: 'loadmore',
				flag:false,
				open:false,
				addOrder:useCartStore()

			};
		},
		onLoad(res) {
			const date = new Date();
			date.setHours(18, 0, 0, 0);
			// 每天下午的时间戳
			const timestamp = date.getTime();
			
			const cdate = Date.now()
			console.log("能不能支付",cdate,timestamp,cdate>timestamp);
			if(cdate>timestamp){
				this.open = true
			}else{
				this.open = false
			}

			this.$nextTick(() => {
				this.init()
			})
		},

		methods: {
			init() {
				this.getdata(this.current)
			},
			onreachBottom() {
				console.log("加载");
				if (this.status == 'loadmore') {
					this.getdata(this.swiperCurrent)
				} else {
					toast("没有更多了")
				}
			},
			tabsChange(index) {
				this.swiperCurrent = index
				this.page = 1
				this.status = 'loading'
				this.flag = false
				this.tabs[index].list = []
				this.getdata(index)

			},
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.tabs1.setDx(dx);
			},
			returnTime(item){
				// 当前的时间戳
				const cDate = Date.now()
				const eDate = Date.parse(item.period_date)
				return eDate -cDate
				
				
			},

			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.tabs1.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			loadmore() {
				if (this.status == 'loadmore') {
					this.page++
					this.getdata(this.swiperCurrent)
				} else {
					toast("没有更多了")
				}
			},
			getdata(index) {
				let type = ''
				let check_status =''
				if(index==0){
					type ='check'
					check_status= 0
				}
				if(index==1){
					type= 'buy'
					check_status=1
				}
				if(index==2){
					type='end'
					check_status=-1
				}
				toastload()
				getPlist({
					page:this.page,
					type,
					check_status,
				}).then(res=>{
					console.log("数据",res);
					if(res.last_page>res.page){
						this.page++
						this.flag = true
						this.status = 'loadmore'
					}else{
						this.flag = false
						this.status = 'nomore'
					}
					 res.list.forEach(item=>{
						 
						 if(item.goods_sku_id){
							 let obj = {
								 ...item,
								 skus_name:item.goods.skus?item.goods.skus.list.map(e=>{
								 	if( e.id==item.goods_sku_id){
								 		return e.names[0]
								 	}
								 }):""
							 }
							 this.tabs[index].list.push(obj)
							 
						 }else{
							 this.tabs[index].list.push(item)
						 }
						
					})
					closeload()
				})
			},


			goDetail(id) {
				tiao('/page/sendOrderDetail/sendOrderDetail?id='+id)
			},
			gopay(order){
				this.addOrder.addOrder(order)
				setTimeout(()=>{
					uni.redirectTo({
						url:'/page/orderConfirm/orderConfirm'
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.swiperBox {
		height: 1360rpx;
		
}
.orderItem{
	.status{
		font-size: 32rpx;
	}
	.goods{
		.right{
			height: 160rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}
		.name{
			width: 450rpx;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
		}
		.price{
			color: #FA453C;
		}
	}
	.btns{
		display: flex;
		flex-direction: row-reverse;
		.btn{
			min-width: 160rpx;
			height: 60rpx;
			text-align: center;
			line-height: 40rpx;
			border-radius: 20rpx;
			border: 1rpx solid #dedede;
			padding: 10rpx 5rpx;
			color: #333;
			margin: 5rpx 10rpx;
		}
		.pay{
			background-color: #FA453C;
			color: #fff;
		}
	}
}
		
</style>